<template>
  <div class="health-record">
    <div class="header">
      <span class="back-arrow" @click="back()">&lt;</span>
      <span class="title">健康档案</span>
      <span class="save-button" @click="addc()">保存</span>
    </div>
    <div class="content">
      <div class="required-section">
        <div class="box">
          <span class="section-title">*以下为必填项</span>
        </div>
        <div
          style="
            display: flex;
            justify-content: space - between;
            align-items: center;
            margin-bottom: 10px;
            margin-top: 10px;
            width: 100%;
            height: 20px;
          "
        >
          <span class="label">关系</span>
          <van-field
            class="input-placeholder"
            v-model="fieldValue"
            is-link
            readonly
            placeholder="请选择"
            @click="showPicker = true"
          />
          <van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
            <van-picker
              :model-value="arelation"
              :columns="columns"
              @cancel="showPicker = false"
              @confirm="onConfir"
            />
          </van-popup>
        </div>
        <van-divider />
        <div class="item">
          <span class="label">姓名</span>
          <input type="text" class="input-placeholder" placeholder="请输入姓名" v-model="name" />
        </div>
        <van-divider />
        <div class="item gender-item">
          <span class="label">性别</span>
          <van-radio-group v-model="checked" direction="horizontal">
            <van-radio name="1" id="male">男</van-radio>
            <van-radio name="2" id="female">女</van-radio>
          </van-radio-group>
        </div>
        <van-divider />
        <div class="item">
          <span class="label" :value="date" @click="show = true">出生日期</span>
          <van-calendar
            v-model:show="show"
            @confirm="onConfirm"
            :min-date="minDate"
            :max-date="maxDate"
          />
          <span class="input-placeholder">{{ date }}</span>
        </div>
      </div>
      <van-divider />
      <div class="optional-section">
        <div class="box">
          <span class="section-title">以下为选填项</span>
        </div>
        <van-divider />

        <div class="item">
          <span class="label">手机号</span>
          <input type="text" class="input-placeholder" placeholder="请输入手机号" />
        </div>
        <van-divider />

        <div class="item">
          <span class="label">身份证号</span>
          <input type="text" class="input-placeholder" placeholder="请输入身份证号" />
        </div>
        <van-divider />

        <div class="item">
          <span class="label">身高</span>
          <span class="input-placeholder">请选择 &gt;</span>
        </div>
        <van-divider />

        <div class="item">
          <span class="label">体重</span>
          <input type="text" class="input-placeholder" placeholder="请输入kg" />
        </div>
        <van-divider />

        <div class="item">
          <span class="label">BMI</span>
          <span class="input-description">{{ abmi }}</span>
        </div>
        <van-divider />

        <div class="item">
          <span class="label">腰围</span>
          <span class="input-placeholder">请选择 &gt;</span>
        </div>
      </div>
      <div class="opt-section">
        <div class="box"></div>
        <div class="item">
          <span class="label">吸烟史</span>
          <span class="input-placeholder">请选择 &gt;</span>
        </div>
        <van-divider />
        <div class="item">
          <span class="label">饮酒史</span>
          <span class="input-placeholder">请选择 &gt;</span>
        </div>
        <van-divider />
      </div>
    </div>
  </div>
  <van-back-top />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const checked = ref('1')
const date = ref('')
const show = ref(false)
const name = ref('')
const showPicker = ref<any>(false)
const formatDate = (date: any) => {
  return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
}
const onConfirm = (value: any) => {
  show.value = false
  date.value = formatDate(value)
}
const fieldValue = ref('')
const onConfir = (value: any) => {
  showPicker.value = false
  fieldValue.value = arelation.value[0]
  console.log(value[0])
}
const minDate = new Date(1990, 0, 1)
const maxDate = new Date(2010, 0, 31)
import { useRouter } from 'vue-router'
const router = useRouter()
const back = () => {
  router.go(-1)
}
const columns = ref([
  { text: '父亲', value: '' },
  { text: '母亲', value: '' },
  { text: '儿子', value: '' },
  { text: '女儿', value: '' }
])
const arelation = ref(['父亲', '母亲', '儿子', '女儿'])
const agender = '男'
const abirthday = '1980-02-03'
const aphone = '13800000000'
const aheight = ['150cm', '160cm', '170cm']
const awaistline = ['60kg', '70kg', '80kg']
const asmoking = ['是', '否']
const adrinking = ['是', '否']
const abmi = '23.45'
const addc = () => {
  localStorage.setItem('name', name.value)
  localStorage.setItem('gender', agender)
  localStorage.setItem('birthday', abirthday)
  localStorage.setItem('phone', aphone)
  localStorage.setItem('height', aheight[0])
  localStorage.setItem('weight', awaistline[0])
  localStorage.setItem('smoking', asmoking[0])
  localStorage.setItem('drinking', adrinking[0])
  localStorage.setItem('bmi', abmi)
  localStorage.setItem('waistline', awaistline[0])
  localStorage.setItem('relation', arelation.value[0])
  localStorage.setItem('idCard', '429000198002031234')
  router.go(-1)
}
</script>

<style>
.health-record {
  font-family:
    Arial,
    sans - serif;
  background-color: white;
  width: 100%;
  margin: 0 auto;
  height: 100%;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid lightgray;
}

.back-arrow {
  font-size: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.save-button {
  color: green;
  font-size: 16px;
}

.content {
  padding: 10px;
  overflow: hidden;
}

.section-title {
  font-size: 14px;
  margin-bottom: 10px;
  color: gray;
}

.item {
  display: flex;
  justify-content: space - between;
  align-items: center;
  margin-bottom: 10px;
  margin-top: 10px;
  width: 100%;
  height: 10px;
}

.label {
  width: 40%;
  font-size: 14px;
  font-weight: 500;
}

.input-placeholder {
  width: 60%;
  color: gray;
  text-align: right;
  border: none;
  background: white;
}

.input-description {
  width: 60%;
  color: gray;
  text-align: right;
}

.gender-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.gender-option {
  margin-right: 10px;
  width: 50%;
  text-align: right;
  color: gray;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.box {
  width: 100%;
  height: 30px;
  background: whitesmoke;
  line-height: 30px;
}

.opt-section {
  margin-top: 20px;
}
</style>
